<template>
  <div class="login-box">
    <div class="login-main">
      <div class="clearfix form-main">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="form.mobile"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="mobile_code">
            <el-input v-model="form.mobile_code"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>
          <div style="height:40px;width:100%;position:relative;margin-bottom:20px;">
            <section v-if="geetStart" style="height:40px;" class="form_group scroll_captcha relative-position" :id="geetestId">
              <z-geetest :bindon="geetestId" @setGeetest="setGeetest"></z-geetest>
            </section>
          </div>
          <el-row :gutter="20">
            <el-col :span="12">已有账号</el-col>
            <el-col :span="12"><router-link to='/login'>前往登录</router-link>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">注册</el-button>
            <el-button type="primary" @click="onSendMobileCode">获取验证码</el-button>
          </el-form-item>
          
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { register,SendMobileCode } from "api";
export default {
  data() {
    return {
      geetStart: false,
      geetestId: "geetestId" + 123,
      form: {
        mobile: "",
        password: ""
      },
      geetObj: null
    };
  },
  mounted() {
    this.geetStart = true;
  },
  methods: {
    onSendMobileCode() {
      this.$promise
        .post(SendMobileCode, {
          mobile: this.form.mobile
        })
        .then(resp => {
          if (resp.status == 1) {
            this.$message({
              type: "success",
              message: "发送成功"
            });
          } else {
            this.$message({
              type: "error",
              message: resp.msg
            });
          }
        });
    },
    onSubmit() {
      this.$promise
        .post(
          register,
          _.assign(
            {},
            this.form,
            this.geetObj ? this.geetObj.getValidate() : {}
          )
        )
        .then(resp => {
          if (resp.status == 0) {
            if (resp.code == "40014") {
              this.geetObj.reset();
            }
            this.$message(resp.msg);
          } else {
            Cookies.set(SESSION_KEY, resp.token.token, {
							domain: SESSION_DOMAIN,
							expires: resp.token.expiresIn
					  })
            this.$router.replace({ path: "list" });
          }
        });
    },
    setGeetest(obj) {
      this.geetObj = obj;
    }
  }
};
</script>
<style lang="scss" scoped>
.login-box {
  width: 100%;
  height: 100%;
  background: #666;
  position: fixed;
  .login-main {
    position: absolute;
    width: 80%;
    max-width: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
  }
  .form-main {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
</style>

